<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码执行功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        textarea {
            height: 200px;
            font-family: 'Courier New', monospace;
        }
        button {
            background: #007acc;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        button:hover {
            background: #005a9e;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
        }
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .loading {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>代码执行功能测试</h1>
        <p>这个页面用于测试后端代码执行API是否正常工作。</p>
        
        <div class="form-group">
            <label for="language">选择编程语言:</label>
            <select id="language">
                <option value="python">Python</option>
                <option value="java">Java</option>
                <option value="cpp">C++</option>
                <option value="javascript">JavaScript</option>
                <option value="go">Go</option>
                <option value="rust">Rust</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="code">输入代码:</label>
            <textarea id="code" placeholder="在这里输入要执行的代码...">print("Hello, World!")
print("这是一个测试代码")</textarea>
        </div>
        
        <div class="form-group">
            <button id="runBtn" onclick="runCode()">▶️ 运行代码</button>
            <button id="exampleBtn" onclick="loadExample()">📝 加载示例</button>
            <button onclick="clearResult()">🗑️ 清空结果</button>
        </div>
        
        <div id="status" class="status" style="display: none;"></div>
        <div id="result"></div>
    </div>

    <script>
        const examples = {
            'python': `# Python 示例
print("Hello, World!")

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

for i in range(10):
    print(f"fibonacci({i}) = {fibonacci(i)}")`,

            'java': `// Java 示例
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
        
        for (int i = 0; i < 10; i++) {
            System.out.println("fibonacci(" + i + ") = " + fibonacci(i));
        }
    }
    
    public static int fibonacci(int n) {
        if (n <= 1) return n;
        return fibonacci(n-1) + fibonacci(n-2);
    }
}`,

            'cpp': `// C++ 示例
#include <iostream>
using namespace std;

int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

int main() {
    cout << "Hello, World!" << endl;
    
    for (int i = 0; i < 10; i++) {
        cout << "fibonacci(" << i << ") = " << fibonacci(i) << endl;
    }
    
    return 0;
}`,

            'javascript': `// JavaScript 示例
console.log("Hello, World!");

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

for (let i = 0; i < 10; i++) {
    console.log(\`fibonacci(\${i}) = \${fibonacci(i)}\`);
}`,

            'go': `// Go 示例
package main

import "fmt"

func fibonacci(n int) int {
    if n <= 1 {
        return n
    }
    return fibonacci(n-1) + fibonacci(n-2)
}

func main() {
    fmt.Println("Hello, World!")
    
    for i := 0; i < 10; i++ {
        fmt.Printf("fibonacci(%d) = %d\\n", i, fibonacci(i))
    }
}`,

            'rust': `// Rust 示例
fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

fn main() {
    println!("Hello, World!");
    
    for i in 0..10 {
        println!("fibonacci({}) = {}", i, fibonacci(i));
    }
}`
        };

        function loadExample() {
            const language = document.getElementById('language').value;
            const code = document.getElementById('code');
            code.value = examples[language] || examples['python'];
        }

        function clearResult() {
            document.getElementById('result').innerHTML = '';
            document.getElementById('status').style.display = 'none';
        }

        async function runCode() {
            const language = document.getElementById('language').value;
            const code = document.getElementById('code').value;
            const runBtn = document.getElementById('runBtn');
            const status = document.getElementById('status');
            const result = document.getElementById('result');

            if (!code.trim()) {
                alert('请输入代码');
                return;
            }

            // 显示运行状态
            runBtn.disabled = true;
            runBtn.textContent = '⏳ 运行中...';
            status.style.display = 'block';
            status.className = 'status loading';
            status.textContent = '正在执行代码，请稍候...';
            result.innerHTML = '';

            try {
                const response = await fetch('/api/run/advanced', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        code: code,
                        language: language,
                        userId: 'test-user'
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    status.className = 'status success';
                    status.textContent = '代码执行成功！';
                    
                    result.innerHTML = `
                        <div class="result success">
                            <strong>执行结果:</strong>
                            ${data.output || '代码执行完成，无输出'}
                        </div>
                        ${data.containerId ? `<div style="margin-top: 10px; font-size: 12px; color: #666;">容器ID: ${data.containerId}</div>` : ''}
                    `;
                } else {
                    status.className = 'status error';
                    status.textContent = '代码执行失败！';
                    
                    result.innerHTML = `
                        <div class="result error">
                            <strong>执行错误:</strong>
                            ${data.error || '未知错误'}
                        </div>
                    `;
                }
            } catch (error) {
                status.className = 'status error';
                status.textContent = '网络错误或服务器异常！';
                
                result.innerHTML = `
                    <div class="result error">
                        <strong>错误信息:</strong>
                        ${error.message}
                    </div>
                `;
            } finally {
                // 恢复按钮状态
                runBtn.disabled = false;
                runBtn.textContent = '▶️ 运行代码';
            }
        }

        // 页面加载完成后自动加载示例代码
        window.addEventListener('load', () => {
            loadExample();
        });

        // 语言切换时自动加载对应示例
        document.getElementById('language').addEventListener('change', loadExample);
    </script>
</body>
</html> 